<template>
  <canvas class="full" id="dxmcv"></canvas>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";

const props = defineProps({
  vid:String
});
const emit = defineEmits(["close"]);
const state = reactive({});

const init = () => {
  let canvas = document.getElementById("dxmcv");
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
  let ctx = canvas.getContext("2d");
  let isDrawing = false;
  let startX, startY, endX, endY;

  // 鼠标按下：记录起点
  canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    const rect = canvas.getBoundingClientRect();
    startX = e.clientX - rect.left;
    startY = e.clientY - rect.top;
  });

  // 鼠标松开：记录终点并画矩形
  canvas.addEventListener("mouseup", (e) => {
    if (!isDrawing) return;
    isDrawing = false;

    const rect = canvas.getBoundingClientRect();
    endX = e.clientX - rect.left;
    endY = e.clientY - rect.top;

    // 清空画布，保证只有一个矩形
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 计算矩形的左上角和宽高
    const x = Math.min(startX, endX);
    const y = Math.min(startY, endY);
    const w = Math.abs(endX - startX);
    const h = Math.abs(endY - startY);

    // 绘制矩形
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.stroke();

    console.log("开始坐标:", startX, startY);
    console.log("结束坐标:", endX, endY);

    const sx = Math.round((startX / canvas.width) * 255);
    const sy = Math.round((startY / canvas.height) * 255);
    const ex = Math.round((endX / canvas.width) * 255);
    const ey = Math.round((endY / canvas.height) * 255);
    // const sx = (startX / canvas.width) * 255;
    // const sy = (startY / canvas.height) * 255;
    // const ex = (endX / canvas.width) * 255;
    // const ey = (endY / canvas.height) * 255;
    console.log("矩形比例坐标:", { sx, sy, ex, ey });
    // emit('close')
    let a = Math.abs(ex - sx) < 5 ? (ex + 5) : ex;
    useApi
    .post("/dynamicview/ar/selzoom", {
      cameraIndexCode: 'a36796f038ac4aa3a4333cc1d8ef0524',
      // "startX": ex,
      // "startY": ey,
      // "endX": sx,
      // "endY": sy
      "startX": sx,
      "startY": sy,
      "endX": a,
      "endY": ey
    })
    .then((res) => {
    
      // setTimeout(()=>{
      //   useApi.post("/dynamicview/ar/handlecontrol", {
      //     action: 0,
      //     cameraId: '1955472120574251009',
      //     command: ex - sx > 0 ? 'ZOOM_IN' :'ZOOM_OUT',
      //   });
      //       useApi.post("/dynamicview/ar/handlecontrol", {
      //     action: 1,
      //     cameraId: '1955472120574251009',
      //     command: 'LEFT',
      //   });
      // },5000)
       
      // setTimeout(() => {
      //   useApi.post("/dynamicview/ar/handlecontrol", {
      //     action: 0,
      //     cameraId: '1955472120574251009',
      //     command: ex - sx > 0 ? 'ZOOM_IN' :'ZOOM_OUT',
      //   });
      // }, 30);
      // setTimeout(() => {
      //   useApi.post("/dynamicview/ar/handlecontrol", {
      //     action: 1,
      //     cameraId: '1955472120574251009',
      //     command: 'LEFT',
      //   });
      // }, 30);
    });
  });
  canvas.addEventListener('contextmenu', function (e) {
    // e.preventDefault();
    // emit('close')
  })
};
onMounted(() => {
  setTimeout(() => {
    init();
  }, 200);

  ElNotification({
    title: "操作提示",
    message: "左键长按框选",
    position: "bottom-right",
  });
});
</script>

<style lang="scss" scoped></style>
